PurPal: Cat Nutrition
App Case study
Sylvia Boamah
The product:
PurPal is an app by a subscription
cat food
vendor that allows users to track
their cat’s
health, find healthy cat food alternatives
for sale, and understand their ingredients.
Project overview
Project duration:
October 2022 –February 2023
The problem:
Cat owners lack
information
and
resources,
outside of
vet visits, on
the
nutritional value of the cat food
they
purchase on a regular
basis.
Project overview
The goal:
Design a nutrition tracking
app for a
subscription cat food vendor.
My role:
Lead UX designer and UX researcher
Project overview
Responsibilities:
–Conduct research
–Create wireframes and prototypes
–Conduct usability studies
Understanding
the user
●User research
●Personas
●Problem statements
●User journey maps
User research:
summary
I started conducting my research by recruiting cat owners
within
my social media circle to interview.
These cat owners spanned different
demographics between age, gender, and
ethnic
background. I
held ~15 minutes interviews
over the phone
with permission to record the calls for notetaking.
I had the assumption that cat owners would have a better idea of what was in
their cat’s food
because of regular vet visits and cat
food purchase. From my findings, it
was apparent
that most
cat owners had no clue what their
companion was eating. It was important for me to find out why
and how to help better communicate nutrition on a regular
basis.
Research goals:
-I want to understand the emotions and motivations behind cat
care.
-I want to understand frustrations
when buying cat food, especially for
nutrition.
-I want to understand the process for getting or subscribing to
cat food.
User research:
pain points
Lack of knowledge
Cat owners do not know
about cat food
ingredients, and
veterinarians may not
relay that information
clearly.
Lack of transparency
The most popular cat
brands do not prioritize
health but rather taste,
lacking transparency
in
what’s really in
cat food.
Price vs. Health
Cat owners think the
healthier options
are the
most expensive, making
them have to choose
between price and
health. This is not
equitable to lower
income cat owners.
Tracking
Cat owners find it hard
to track the meals and
the purchases of food
for their cat or multiple
cats.
1 2 3
4
Persona: Marium
Problem statement:
Marium is a busy
mom and
evolving professional who needs a
quick and visually
accessible way
to research
and purchase healthy
cat food biweekly because
she
lacks the time to prioritize her
cat’s health.
Persona: AJ
Problem statement:
A J is an undergraduate student
with a part-time job who needs a
balance between buying a monthly
supply of healthy yet cheap
cat
food options because they
are
unsure how to find out if
the
brands financially accessible
to
them are the healthiest.
Persona: Dave
Problem statement:
Dave is a professor
and car fosterer
who needs to provide
each
of his
cats with the right meals
for their
health conditions daily
because it is
hard to track those
meals and
their
nurtitional value on his own.
User journey map: Marium
Image of user
journey map
The goal for Marium was
to buy a
month supply of cat food. My
thought
process was to start with
the normal
flow of going to the store and making a
purchase. Then, I factored in what
would spark
emotion through that
process for busy individual with a
visual impairment like
farsightedness.
This took research
on
the condition and empathizing with
long wait times and difficult font sizes.
From this, I was able to conclude on
improvements for her current
process.
User journey map: A
J
Image of user
journey map
The goal for AJ was also to buy
a
month supply of cat food. My
thought
process was remained
the same, to
start with the normal flow of going to
the store and making a purchase.
However, I factored in their lack of
knowledge
on cat nutrition and the
worry someone with lower income
would have about pricing. This took
researching price dissatisfaction and
empathizing a way to
alleivate that
stress. From this, I was able
to
conclude on
improvements for their
current process.
User journey map: Dave
Image of user
journey map
Dave has the same goal
as the other
personas. My thought process was
remained the same, to start
with the
normal flow of going
to the store
and
making a purchase.
However, I
factored in the stress of
having
multiple cats. This took empathizing
ways to differentiate
the needs of
each
cat. From this, I was
able to
conclude
on
improvements for his current
process.
●Paper wireframes
●Digital wireframes
●Low-fidelity prototype
●Usability studies
Starting
the design
Paper wireframes
My goal was to create and
refine the initial
layouts of the
application. I explored various
possible layouts that best
communicate each desired
screen, including
a brainstorm
of the contents in the
homepage and cat profile. The
following paper
prototypes are
of the refined screens.
Paper wireframes of the Homepage
Digital wireframes:
Product Screen
Based on interviews,
users want
transparency when it comes
to ingredients.
The goal of the product screen
is to list
ingredients, display candid descriptions
about health benefits and drawbacks, and
allow users to purchase
products from the
app. Icon indicators, such as thumbs up and
thumbs down, are commonly
known and can
concisely communicate healthy vs unhealthy
ingredients when accompanied
with color.
Users will be guided to a traditional checkout
flow once they click
“Add to Cart”.
Dropdown
for more
information
on each
ingredient
Icon indicators
of healthy
versus
unhealthy
ingredients
Button for
adding
products to
cart
Digital wireframes:
Cat Profile
The goals of the Cat Profile
screen
is to host important information
about the user’s cat(s). Based on
interviews, users want to be able to
track their cat’s meals and
changes
within their cat’s diet,
weight, and
growth. Users would
be able to add
and edit meals, update their cat’s
information (such as weight,
age,
and length), and be notified
of
changes with the assistance of data
visualization.
Dropdown that
allows users to
view and add
multiple cats.
Meals section
to add and
track wet and
dry meals.
Statistics
section to
notify users of
changes with
their cat.
Usability study: findings
I conducted two (2) remote, moderated usability study with
five (5) participants, the
first with the low-fidelity prototype
and the second with the high-fidelity prototype. The
participants are all cat owners between the ages of 21 and
75
who are employed with the desire to be health conscious.
Users were asked to complete five (5)
tasks using a
low
fidelity prototype and fill out a System
Usability Scale.
I split my observations into six themes
using an affinity
diagram:
1. Convenient
elements
2. Elements that caused confusion
3. Emotions
4. Elements that were clear
5. Places where the
app can establish trust
6. Other considerations in design
People want products accessible on
the homepage, especially trusted
products.
Supporting
evidence from
the usability study
●4 out of 5 participants did not know
that
products were accessible from the
homepage with the “Health Rankings”
label.
●1 out of 5 participants wants input from
vets on the products somewhere on the
application.
I changed the section title from
Health Rankings
to
Vet Recommended Products
for where vet-
trusted products can be visible on the home
screen. I also added the source of the
Tip of the
Day
so users can trust the app’s content.
BEFORE AFTER
People want a quick
reordering
process.
Supporting
evidence from
the
usability study
●2 out of 5 participants found
that the reordering process had
too many steps.
●1 out of 5 participants
specifically expressed
frustration with refilling the
checkout flow.
I added a modal for quick reordering
that shows the
card
information and
shipping address. I also added the
option to
change your payment
information which redirects to the
regular checkout flow.
BEFORE AFTER
The pencil icon is not clear
enough for some people in
representing
an edit feature.
Supporting
evidence from
the usability
study
●2 out of 5 participants had trouble
finding how to edit their cat’s
meals.
●2 out of 5 participants clicked on
other buttons
on the Cat Profile to
edit meals before or instead of the
pencil.
I changed the
Edit Meal
icon to a button
with the icon and supporting text.
BEFORE AFTER
Usability study: findings (cont.)
Round 1 findings
3
4
Round 2 findings
Users need ways to trust the app.
1
Users need clear indicators on what
features do.
2
Users need accessible language
that accompanies abstract icons.
Users want a faster reordering
process.
1Users need a receipt as order
confirmation.
Users need to know what’s being
reordered.
2
●Mockups
●High-fidelity prototype
●Accessibility
Refining
the design
Mockups: Order
Confirmation
The order confirmation is not
specific enough.
Supported evidence from usability
study.
•4 out of 5 participants wanted a confirmation
receipt with an order summary.
•3 out of 5 participants felt uncomfortable with
the lack of information about their
order.
I changed the confirmation modal to an entire
page with an order summary.
BEFORE AFTER
People want to know what
product they’re
reordering.
Supporting
evidence
from the
usability study
●3 out of 5 participants found
that the reordering popup too
vague to trust.
I added an image and product
information to the
Reorder Now
modal.
BEFORE AFTER
Key Mockups
Homepage Orders Screen
Products
Screen Cat Profile
Key Mockups
(cont.)
CheckoutProduct Screen
Accessibility considerations
High color contrast
Users need color
contrasts that comply
with WCAG standards for
color and readability.
Use of text
Users need icons with
labels wherever necessary
to indicate their
functionality,
especially in
the menu and in buttons.
Screen reader
compatibility
Users need the app to be
compatible with screen
readers. This includes
focusing on text and
layout heirarchy.
1 2 3
●Takeaways
●Next steps
Going forward
Takeaways
Impact:
"I like that it shows what your cat eats and
when. I think it's nice that instead of just the
ingredients, it
breaks it
down to what it is.
That's convenient if you want to
show your vet
for any reason.“ –
Participant E
What I learned:
I learned the importance of user centricity.
Focusing on every possible end user
creates
impactful design. Everyone deserves to be
represented in all aspects of design and
the
product lifecycle.
Next steps
Registration/Log-in
Flow
This application will
require some research on
what the best registration
flow will be since the
user
is making two (2)
separate profiles.
Expanding Cat Stats
capabilities and sharing
feature
I want to research what
users would want to learn
about their cat. The app
can be a one-stop-shop
for their cat’s information
and statistics could be
shared to their vets.
Price vs Health
Comparison feature
and
Rewards System
For users who want the
healthiest food within
their budget would have a
comparison feature to
find a satisfactory
compromise. Then, users
will get rewards for
buying healthy food.
1 2 3
Thank you!
